<template>
  <div style="width: 100%; height: 800px" id="panolensViewer">
    <!-- <video :src="videoUrl" style="width: 100%; height: 100%" controls></video> -->
  </div>
</template>

<script>
import * as THREE from "three";
import * as PANOLENS from "panolens";
import { preview } from "@/api/file/index.js";
export default {
  props: {
    previewData: {
      typeof: Object,
      default: null,
    },
  },
  data() {
    return {
      videoUrl: "",
      viewer: null,
      panorama: null,
    };
  },
  methods: {
    // 场景搭建
    init() {
      this.panorama = new PANOLENS.VideoPanorama(this.videoUrl, {
        autoplay: true,
      });
      this.viewer = new PANOLENS.Viewer({
        container: document.querySelector("#panolensViewer"),
        cameraFov: 100,
        initialLookAt: new THREE.Vector3(0, 0, 5000),
      });
      this.viewer.add(this.panorama);
    },
    // 请求数据
    getData() {
      preview({ fileId: this.previewData.fileId })
        .then((res) => {
          this.videoUrl = res.data.url;
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style>
</style>